{%- if section.settings.image != blank  -%}
  {%- style -%}
    .split-image__image-{{ section.id }} .adapt-to-image::before {
      padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      content: '';
      display: block;
    }
    {%- endstyle -%}
{%- endif -%}

{% render 'image-overlay-opacity', id: section.id, ammount: section.settings.image_overlay_opacity %}

{%- liquid
  assign show_padding = true
  assign bg_full = true
  assign rounded = false
  unless section.settings.padding_to_full_section
    assign show_padding = false
    assign bg_full = false
  endunless
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
      assign rounded = true
    when 'secondary'
      assign background_color = 'bg-secondary'
      assign rounded = true
    when 'inverse'
      assign background_color = 'bg-inverse'
      assign rounded = true
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
      assign rounded = true
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase

  case section.settings.desktop_layout
    when 'text_first'
      assign desktop_layout = 'flex-sm-row-reverse'
      assign text_fist = true
    when 'image_first'
      assign desktop_layout = ''
    else
      assign desktop_layout = ''
  endcase

  case section.settings.desktop_content_position
    when 'top'
      assign desktop_content_position = 'align-items-sm-start'
    when 'middle'
      assign desktop_content_position = 'align-items-sm-center'
    when 'bottom'
      assign desktop_content_position = 'align-items-sm-end'
  endcase

  case section.settings.desktop_text_alignment
    when 'left'
      assign desktop_text_alignment = 'text-sm-start'
    when 'center'
      assign desktop_text_alignment = 'text-sm-center'
    else
      assign desktop_text_alignment = ''
  endcase

  case section.settings.mobile_text_alignment
    when 'left'
      assign mobile_text_alignment = 'text-start'
    when 'center'
      assign mobile_text_alignment = 'text-center'
    else
      assign mobile_text_alignment = ''
  endcase


  case section.settings.desktop_image_width
    when 'small'
      assign desktop_image_width = 'col-sm-4'
      assign desktop_text_width = 'col-sm-8'
    when 'medium'
      assign desktop_image_width = 'col-sm-6'
      assign desktop_text_width = 'col-sm-6'
      when 'large'
      assign desktop_image_width = 'col-sm-8'
      assign desktop_text_width = 'col-sm-4'
      endcase
  case section.settings.image_height
    when 'small'
      assign image_height = 'h-4 h-lg-5'
    when 'medium'
      assign image_height = 'h-5 h-lg-7'
    when 'large'
      assign image_height = 'h-7 h-lg-9'
    when 'adapt_to_image'
      assign image_height = 'adapt-to-image'
  endcase

  assign img_rounded = 'rounded-3'
  unless bg_full
    if rounded
      if text_fist
        assign img_rounded = 'rounded-sm-end-3'
        assign text_rounded = 'rounded-sm-start-3'
      else
        assign img_rounded = 'rounded-sm-start-3'
        assign text_rounded = 'rounded-sm-end-3'
      endif
    endif
  endunless

  case section.settings.fontsize
    when 'display-4'
      assign bodysize = 'h4'
      assign mark = 'h2'
    when 'display-5'
      assign bodysize = 'h5'
      assign mark = 'h2'
    when 'h1'
      assign bodysize = 'lead'
      assign mark = 'h3'
    when 'h2'
      assign bodysize = 'lead'
      assign mark = 'h4'
    when 'h3'
      assign bodysize = ''
      assign mark = 'h5'
  endcase
%}

{%- liquid
  case section.settings.activity_status
    when 'Ongoing'
      assign activity_status_text = 'sections.image-with-text.ongoing'
      assign activity_status_bg = section.settings.activity_status_color 
    when 'Closed'
      assign activity_status_text = 'sections.image-with-text.closed'
      assign activity_status_bg =  section.settings.activity_status_color 
      when 'custom-text'
      assign activity_status_text = section.settings.activity_status_custom_text
      assign activity_status_bg =  section.settings.activity_status_color 
  endcase
-%}

{%- liquid
  assign show_stretched_link = false
  for block in section.blocks
    case block.type
      when 'button'
        if block.settings.primary_button_link != blank
          assign stretched_link = block.settings.primary_button_link
          assign show_stretched_link = true
        elsif block.settings.secondary_button_link != blank
          assign stretched_link = block.settings.secondary_button_link
          assign show_stretched_link = true
        else
          assign show_stretched_link = false
        endif

        case block.settings.primary_button_style
          when 'solid'
            assign first_button_class = 'mx-2 btn-'
            assign parent_class = 'mx-n2'
          when 'outline'
            assign first_button_class = 'mx-2 btn-outline-'
            assign parent_class = 'mx-n2'
          when 'link'
            assign first_button_class = 'mx-3 btn-link link-'
            assign parent_class = 'mx-n3'
        endcase

        case block.settings.secondary_button_style
          when 'solid'
            assign second_button_class = 'mx-2 btn-'
          when 'outline'
            assign second_button_class = 'mx-2 btn-outline-'
          when 'link'
            assign second_button_class = 'mx-3 btn-link link-'
        endcase
    endcase
  endfor
%}

{%- liquid

  case section.settings.section_color_schema
    when 'primary'
      assign section_background_color = 'bg-primary'
    when 'secondary'
      assign section_background_color = 'bg-secondary'
    when 'inverse'
      assign section_background_color = 'bg-inverse'
    when 'white'
      assign section_background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign section_background_color = 'bg-black'
  endcase

   case section.settings.header_color
  when 'white'
    assign header_color = 'text-white'
    assign richtext_link_style = 'richtext-link-light'
    case section.settings.button_style
      when 'solid'
        assign button_style = 'btn-light'
      when 'outline'
        assign button_style = 'btn-outline-light'
      when "link"
        assign button_style = 'btn-link link-light'
    endcase
  else
    assign header_color = ''
    assign richtext_link_style = 'richtext-link-default'
    case section.settings.button_style
      when 'solid'
        assign button_style = 'btn-primary'
      when 'outline'
        assign button_style = 'btn-outline-primary'
      when "link"
        assign button_style = 'btn-link link-primary'
    endcase
  endcase

  case section.settings.heading_alignment
    when 'left'
      assign heading_alignment = 'text-start'
      assign heading_position = 'justify-content-md-start'
    when 'center'
      assign heading_alignment = 'text-center'
      assign heading_position = 'justify-content-md-center'
    when "right"
      assign heading_alignment = 'text-end'
      assign heading_position = 'justify-content-md-end'
  endcase

    case section.settings.section_button_style
      when 'solid'
        assign section_button_class = 'mx-2 btn-'
        assign parent_class = 'mx-n2'
      when 'outline'
        assign section_button_class = 'mx-2 btn-outline-'
        assign parent_class = 'mx-n2'
      when 'link'
        assign section_button_class = 'mx-3 btn-link link-'
        assign parent_class = 'mx-n3'
    endcase
-%}
{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- assign  padding_top = section.settings.padding_top | append:'px' -%}
{%- assign  padding_bottom = section.settings.padding_bottom | append:'px' -%}

{%- assign padding_mobile_top = section.settings.padding_top_mob | append: 'px' -%}
{%- assign padding_mobile_bottom = section.settings.padding_bottom_mob | append: 'px' -%}
{% style %}
  {{ section_identifier }} .section-content {
    margin-bottom: 32px;
  }
  {{ section_identifier }} .btn-container-bottom {
    margin-top: 32px;
  }

 {{ section_identifier }} {
    padding-top: {{padding_top}};
    padding-bottom: {{padding_bottom}};
  }

 @media only screen and (max-width: 430px) {
    {{ section_identifier }} {
      padding-top: {{ padding_mobile_top }};
      padding-bottom: {{ padding_mobile_bottom }};
    }
  }
{% endstyle %}

<div class="{{ section_background_color }}"> 
  {%- if section.settings.section_heading != blank or section.settings.text != blank -%}
    <div class="container {{ heading_alignment }} {{ header_color }}">
        <div class="row {{ heading_position }}">
          <div class="section-content col-12 {{ section.settings.text_width }}">
            {%- if section.settings.section_heading != blank -%}
              <{{ section.settings.adjust_h_tag_to }} class="mb-0 section-title">{{ section.settings.section_heading }}</{{ section.settings.adjust_h_tag_to }}>
            {%- endif -%}
            {%- if section.settings.section_description != blank -%}
              <div class="no-last-margin mt-2 richtext-with-link {{ richtext_link_style }}">
                {{ section.settings.section_description }}
              </div>
            {%- endif -%}
            {%- if section.settings.position_section_button  == false -%}
              {%- if section.settings.section_button_label != blank -%}
                {%- if section.settings.section_button_link != blank -%}
                  <a {% render 'link', link: section.settings.section_button_link %} href="{{ section.settings.section_button_link }}" class="{% if settings.enable_solid_primary_button %}kiks-btn-primary{% endif %} btn {{ section_button_class }}{{ btn_style }} with-stretched-link mt-2">
                    {{ section.settings.section_button_label }}
                  </a>
                {%- else -%}
                  <div class="{% if settings.enable_solid_primary_button %}kiks-btn-primary{% endif %} btn {{ section_button_class }}{{ btn_style }} with-stretched-link mt-2 disabled cursor-default">
                    {{ section.settings.section_button_label }}
                  </div>
                {%- endif -%}
              {%- endif -%}
         {%- endif -%}
          </div>
          
        </div>
      </div>
    {%- endif -%}
  <div class="container {{ section.settings.section_padding_top }} {{ section.settings.section_padding_bottom }}">
    <div class="{% unless bg_full %}{{ background_color }}{% endunless %} rounded-3 overflow-hidden position-relative">
      <div class="row {{ desktop_layout }} gx-0 position-relative">
        <div class="col-12 {{ desktop_image_width }} split-image__image-{{ section.id }} overflow-hidden">
          <div class="{{ image_height }} h-100 position-relative {{ img_rounded }} {% if section.settings.show_activity_status %}smaller-img-radius{% endif %}">
            {% if section.settings.image != blank %}
                <img class="object-fit-cover {{img_rounded}} {% if section.settings.show_activity_status %}smaller-img-radius{% endif %} h-100 w-100 position-absolute"
                  style="top:50%;left:50%;transform: translate(-50%, -50%);"
                  loading="lazy"
                  alt="{{ section.settings.image.alt | escape }}"
                  srcset="{%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                    {%- if section.settings.image.width >= 480 -%}{{ section.settings.image | img_url: '480x' }} 480w,{%- endif -%}
                    {%- if section.settings.image.width >= 720 -%}{{ section.settings.image | img_url: '720x' }} 720w,{%- endif -%}
                    {%- if section.settings.image.width >= 960 -%}{{ section.settings.image | img_url: '960x' }} 960w,{%- endif -%}
                    {%- if section.settings.image.width >= 1200 -%}{{ section.settings.image | img_url: '1200x' }} 1200w,{%- endif -%} "
                  src="{{ section.settings.image | img_url: '1200x' }}">
            {% else %}
              <div class="img-placeholder">
                {{ 'collection-4' | placeholder_svg_tag: 'placeholder-svg h-100 w-100' }}
              </div>
            {% endif %}
            <div class="bg-black {{ img_rounded }} {% if section.settings.show_activity_status %}smaller-img-radius{% endif %} hero-image-overlay-opacity-{{ section.id }}"></div>
            {% if section.settings.show_activity_status %}                  
              <div class="position-absolute top-0 start-0 py-1 px-2 rounded-top-left-3 rounded-bottom-right-3" style="background-color: {{ activity_status_bg }};">
                <p class="mb-0 small fw-bolder text-body-inverse">{% if section.settings.activity_status == 'custom-text' %}{{ section.settings.activity_status_custom_text }}{% else %}{{ activity_status_text | t }}{% endif %}</p>
              </div>
            {% endif %}
            {% if section.settings.enable_image_link %}
              {% if show_stretched_link %}
                <a {% if stretched_link contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ stretched_link }}" class="stretched-link"></a>
              {% endif %}
            {% endif %}
          </div>
        </div>
        <div class="col-12 {{ desktop_text_width }}">
          <div class="px-3 px-sm-6 px-xxl-9 py-4 py-xxl-7 {% if bg_full %} pb-0 pb-sm-7 {% endif %} d-flex h-100 w-100 {{ desktop_content_position }}">
          <div class="{{ desktop_text_alignment }} {{ mobile_text_alignment }} {{ text_color }} flex-grow-1">
          {%- for block in section.blocks -%}
            {%- case block.type -%}
              {%- when 'overline' -%}
                {%- if block.settings.overline != blank -%}
                  <p class="mb-0 {% unless forloop.first %}mt-2{% endunless %}"><span class="small">{{ block.settings.overline }}</span></p>
                {%- endif -%}
              {%- when 'heading' -%}
                {%- if block.settings.heading != empty -%}
                  {%- liquid 
                    if block.settings.enable_adjust_h_tag
                      assign mark = block.settings.adjust_h_tag_to
                    endif
                  -%}
                  <{{ mark }} class="{{ section.settings.fontsize }} fw-bold {% unless forloop.first %}mt-2{% endunless %} mb-0">{{ block.settings.heading }}</{{ mark }}>
                {%- endif -%}
              {%- when 'text' -%}
                {%- if block.settings.text != blank -%}
                  <div class="{{ bodysize }} fw-normal {% unless forloop.first %}mt-2{% endunless %} no-last-margin richtext-with-link {{ richtext_link_style }}">
                    {{ block.settings.text }}
                  </div>
                {%- endif -%}
              {%- when 'button' -%}
                <div class="{% unless forloop.first %}mt-5{% endunless %}">
                  <div class="mt-n2 {{ parent_class }}">
                    {% if block.settings.primary_button_label != blank or block.settings.secondary_button_label != blank %}
                        {%- if block.settings.primary_button_label != blank -%}
                          {%- if block.settings.primary_button_link != blank -%}
                            <a {% render 'link', link: block.settings.primary_button_link %} href="{{ block.settings.primary_button_link }}" class="{% if settings.enable_solid_primary_button %}kiks-btn-primary{% endif %} btn {{ first_button_class }}{{ btn_style }} with-stretched-link mt-2">
                              {{ block.settings.primary_button_label }}
                            </a>
                          {%- elsif block.settings.enable_open_in_google_maps -%}
                            {%- assign google_map_link = 'https://maps.google.com/?q=' | append: block.settings.address -%}
                            <a target="_blank" rel="noopener nofollow" href="{{ google_map_link }}" class="{% if settings.enable_solid_primary_button %}kiks-btn-primary{% endif %} btn {{ first_button_class }}{{ btn_style }} with-stretched-link mt-2">
                              {{ 'sections.image-with-text.open_in_google_maps' | t }}
                            </a>
                          {%- else -%}
                            <div class="{% if settings.enable_solid_primary_button %}kiks-btn-primary{% endif %} btn {{ first_button_class }}{{ btn_style }} with-stretched-link mt-2 disabled cursor-default">
                              {{ block.settings.primary_button_label }}
                            </div>
                          {%- endif -%}
                        {%- endif -%}
                        {%- if block.settings.secondary_button_label != blank -%}
                          {%- if block.settings.secondary_button_link != blank -%}
                            <a {% render 'link', link: block.settings.secondary_button_link %} href="{{ block.settings.secondary_button_link }}" class="{% if settings.enable_solid_secondary_button %}kiks-btn-secondary {% endif %} btn {{ second_button_class }}{{ btn_style }} with-stretched-link mt-2">
                              {{ block.settings.secondary_button_label }}
                            </a>
                            {%- else -%}
                            <div class="{{ block.settings.secondary_button_link }}" class="{% if settings.enable_solid_secondary_button %}kiks-btn-secondary {% endif %} btn {{ second_button_class }}{{ btn_style }} with-stretched-link mt-2 disabled cursor-default">
                              {{ block.settings.secondary_button_label }}
                            </div>
                          {%- endif -%}
                        {%- endif -%}
                    {% endif %}
                  </div>
                </div>
            {%- endcase -%}
          {%- endfor -%}
          </div>
        </div>
        </div>
      </div>
    </div>
  {%- if section.settings.position_section_button  == true -%}
      {%- if section.settings.section_button_label != blank -%}
       <div class="btn-container-bottom d-flex justify-content-center">
         {%- if section.settings.section_button_link != blank -%}
          <a {% render 'link', link: section.settings.section_button_link %} href="{{ section.settings.section_button_link }}" class="{% if settings.enable_solid_primary_button %}kiks-btn-primary{% endif %} btn {{ section_button_class }}{{ btn_style }} with-stretched-link">
            {{ section.settings.section_button_label }}
          </a>
        {%- else -%}
          <div class="{% if settings.enable_solid_primary_button %}kiks-btn-primary{% endif %} btn {{ section_button_class }}{{ btn_style }} with-stretched-link mt-2 disabled cursor-default">
            {{ section.settings.section_button_label }}
          </div>
        {%- endif -%}
       </div>
      {%- endif -%}
  {%- endif -%}
  </div>
</div>


{% schema %}  {
    "name": "Image with text",
    "class": "kiks-image-with-text image-with-text",
    "tag": "section",
    "settings": [
      {
        "type": "select",
        "id": "section_color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          },
          {
            "value": "transparent",
            "label": "Transparent"
          }
        ],
        "default": "white"
      },
      {
        "type": "text",
        "id": "section_heading",
        "default": "Image with text",
        "label": "Heading"
      },
      {
        "type": "richtext",
        "id": "section_description",
        "label": "Description"
      },
      {
        "type": "text",
        "id": "section_button_label",
        "default": "Button label",
        "label": "Primary button label"
      },
      {
        "type": "url",
        "id": "section_button_link",
        "label": "Primary button link"
      },
       {
        "type": "checkbox",
        "id": "position_section_button",
        "label": "Position section button",
        "info": "If enabled, the section button will be positioned below the text",
        "default": false
      },
      {
        "type": "select",
        "id": "section_button_style",
        "label": "Primary button style",
        "options": [
          {
            "value": "solid",
            "label": "Solid"
          },
          {
            "value": "outline",
            "label": "Outline"
          },
          {
            "value": "link",
            "label": "Link"
          }
        ],
        "default": "solid"
      },
      {
        "type": "checkbox",
        "id": "enable_adjust_h_tag",
        "label": "Enable adjust H tag",
        "default": false
      },
      {
        "type": "select",
        "id": "adjust_h_tag_to",
        "label": "Adjust the H tag to",
        "options": [
          {
            "value": "h1",
            "label": "H1"
          },
          {
            "value": "h2",
            "label": "H2"
          },
          {
            "value": "h3",
            "label": "H3"
          },
          {
            "value": "h4",
            "label": "H4"
          },
          {
            "value": "h5",
            "label": "H5"
          },
          {
            "value": "h6",
            "label": "H6"
          }
        ],
        "default":   "h3"
      },
      {
        "type": "select",
        "id": "header_color",
        "label": "Header color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "heading_alignment",
        "label": "Heading alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ],
        "default": "center"
      },
      {
        "label": "Image",
        "type": "image_picker",
        "id": "image"
      },
      {
        "type": "select",
        "id": "desktop_image_width",
        "label": "Desktop image width",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ],
        "info":"Image is automatically optimized for mobile",
        "default": "medium"
      },
      {
        "type": "select",
        "id": "image_height",
        "label": "Image height",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          },
          {
            "value": "adapt_to_image",
            "label": "Adapt to image"
          }
        ],
        "default": "adapt_to_image"
      },
      {
        "type": "range",
        "id": "image_overlay_opacity",
        "min": 0,
        "max": 100,
        "step": 20,
        "default": 0,
        "unit": "%",
        "label": "Image overlay opacity"
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "white"
      },
      {
        "type": "checkbox",
        "id": "padding_to_full_section",
        "label": "Add background color to the full section",
        "default": false
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
             "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "select",
        "id": "fontsize",
        "label": "Fontsize",
        "options": [
          {
            "value": "display-4",
            "label": "Extra large"
          },
          {
            "value": "display-5",
            "label": "Large"
          },
          {
            "value": "h1",
            "label": "Medium"
          },
          {
            "value": "h2",
            "label": "Small"
          },
          {
            "value": "h3",
            "label": "Extra small"
          }
        ],
        "default":   "h1"
      },
      {
        "type": "select",
        "id": "desktop_layout",
        "label": "Desktop image placement",
        "options": [
          {
            "value": "image_first",
            "label": "Image first"
          },
          {
            "value": "text_first",
            "label": "Text first"
          }
        ],
        "default": "image_first"
      },
      {
        "type": "select",
        "id": "desktop_content_position",
        "label": "Desktop content position",
        "options": [
          {
            "value": "top",
            "label": "Top"
          },
          {
            "value": "middle",
            "label": "Middle"
          },
          {
            "value": "bottom",
            "label": "Bottom"
          }
        ],
        "default": "middle"
      },
      {
        "type": "select",
        "id": "desktop_text_alignment",
        "label": "Desktop text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "left"
      },
      {
        "type": "select",
        "id": "mobile_text_alignment",
        "label": "Mobile text alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "left"
      },
      {
        "type": "checkbox",
        "id": "enable_image_link",
        "label": "Enable image link",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_activity_status",
        "default": false,
        "label": "Show activity status"
      },
      {
        "type": "select",
        "id": "activity_status",
        "label": "Activity status",
        "options": [
          {
            "value": "Ongoing",
            "label": "Ongoing"
          },
          {
            "value": "Closed",
            "label": "Closed"
          },
          {
            "value": "custom-text",
            "label": "Custom text"
          }
        ],
        "default": "Ongoing"
      },
      {
          "type": "color",
          "id": "activity_status_color",
          "label": "Activity status color",
          "default": "#000000"
      },
      {
        "type": "text",
        "id": "activity_status_custom_text",
        "label": "Activity status custom text",
        "default": "Custom text",
        "info": "This will be used only if 'Custom text' is selected in the Activity status option above."
      },
      {
        "type": "select",
        "id": "section_padding_top",
        "label": "Section top space",
        "options": [
          {
            "value": "",
            "label": "0"
          },
          {
            "value": "pt-lg-7 pt-6",
            "label": "64px"
          },
          {
            "value": "pt-lg-9 pt-6",
            "label": "96px"
          }
        ],
        "default": ""
      },
      {
        "type": "select",
        "id": "section_padding_bottom",
        "label": "Section bottom space",
        "options": [
          {
            "value": "",
            "label": "0"
          },
          {
            "value": "pb-lg-7 pb-6",
            "label": "64px"
          },
          {
            "value": "pb-lg-9 pb-6",
            "label": "96px"
          }
        ],
        "default": ""
      },
      {
          "type": "header",
          "content": "Kikstart Spacing Settings"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding top",
        "default": 64
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding Bottom",
        "default": 64
      },
      {
        "type": "range",
        "id": "padding_top_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding top",
        "default": 48
      },
      {
        "type": "range",
        "id": "padding_bottom_mob",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "For Mobile Padding Bottom",
        "default": 48
      }
    ],
    "blocks": [
      {
        "type": "overline",
        "name": "Overline",
        "settings": [
          {
            "type": "text",
            "id": "overline",
            "default": "Overline",
            "label": "Overline"
          }
        ]
      },
      {
        "type": "heading",
        "name": "Heading",
        "settings": [
          {
            "type": "text",
            "id": "heading",
            "default": "Image with text",
            "label": "Heading"
          },
          {
            "type": "checkbox",
            "id": "enable_adjust_h_tag",
            "label": "Enable adjust H tag",
            "default": false
          },
          {
            "type": "select",
            "id": "adjust_h_tag_to",
            "label": "Adjust the H tag to",
            "options": [
              {
                "value": "h1",
                "label": "H1"
              },
              {
                "value": "h2",
                "label": "H2"
              },
              {
                "value": "h3",
                "label": "H3"
              },
              {
                "value": "h4",
                "label": "H4"
              },
              {
                "value": "h5",
                "label": "H5"
              },
              {
                "value": "h6",
                "label": "H6"
              }
            ],
            "default":   "h3"
          }
        ]
      },
      {
        "type": "text",
        "name": "Text",
        "settings": [
          {
            "type": "richtext",
            "id": "text",
            "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
            "label": "Text"
          }
        ]
      },
      {
        "type": "button",
        "name": "Buttons",
        "settings": [
          {
            "type": "text",
            "id": "primary_button_label",
            "default": "Button label",
            "label": "Primary button label"
          },
          {
            "type": "url",
            "id": "primary_button_link",
            "label": "Primary button link"
          },
          {
            "type": "select",
            "id": "primary_button_style",
            "label": "Primary button style",
            "options": [
              {
                "value": "solid",
                "label": "Solid"
              },
              {
                "value": "outline",
                "label": "Outline"
              },
              {
                "value": "link",
                "label": "Link"
              }
            ],
            "default": "solid"
          },
          {
            "type": "checkbox",
            "id": "enable_open_in_google_maps",
            "label": "Enable Open in Google Maps",
            "default": false
          },
          {
            "type": "text",
            "id": "address",
            "label": "Address"
          },
          {
            "type": "text",
            "id": "secondary_button_label",
            "default": "Button label",
            "label": "Secondary button label"
          },
          {
            "type": "url",
            "id": "secondary_button_link",
            "label": "Secondary button link"
          },
          {
            "type": "select",
            "id": "secondary_button_style",
            "label": "Secondary button style",
            "options": [
              {
                "value": "outline",
                "label": "Outline"
              },
              {
                "value": "link",
                "label": "Link"
              }
            ],
            "default": "outline"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Image with text",
        "blocks": [
          {
            "type": "overline"
          },
          {
            "type": "heading"
          },
          {
            "type": "text"
          },
          {
            "type": "button"
          }
        ]
      }
    ]
  }
{% endschema %}
